<template>
    <!-- 头部轮播 -->
    <view class="carousel-section">
        <!-- 背景色区域 -->
        <swiper class="carousel" indicator-color="rgba(255,255,255, .5)" :autoplay="true" indicator-active-color="#ffffff"  circular @change="swiperChange" :indicator-dots="indicatorDots">
            <swiper-item v-for="(item, index) in metaData" :key="index" class="carousel-item" @click="navToDetailPage(item)">
                <image :src="item.picUrl" />
            </swiper-item>
        </swiper>
    </view>
</template>

<script>

    export default {
        props:{
            metaData:{
                type:Array,
                default:function () {
                    return [];
                }
            },
        },
        data() {
            return {
                swiperCurrent: 0,
                swiperLength: 0,
				indicatorDots: true,
            }
        },
        methods: {
            navToDetailPage(item){
                this.$emit('navToDetailPage',item);
            },
            //轮播图切换修改背景色
            swiperChange(e) {
                const index = e.detail.current;
                this.swiperCurrent = index;
            },
        }
    }
</script>

<style lang="scss" scoped>
    /* 头部 轮播图 */
    .carousel-section {
        position: relative;
    }
    .carousel {
        height: 280upx;
		width: 710upx;
		margin: 40upx auto 0;

        .carousel-item {
            width: 100%;
            height: 100%;
            // padding: 0 28upx;
            overflow: hidden;
        }

        image {
            width: 100%;
            height: 100%;
            border-radius: 10upx;
        }


    }
    
</style>

<!--<style lang="scss">-->
    <!--.carousel {-->
        <!--/deep/ .uni-swiper-dot {-->
            <!--width: 20 upx;-->
            <!--height: 4 upx;-->
            <!--background-color: #fff;-->
            <!--opacity: .5;-->
        <!--}-->
        <!--/deep/ .uni-swiper-dot-active {-->
            <!--background-color: #fff;-->
            <!--opacity: 1;-->
        <!--}-->
    <!--}-->
<!--</style>-->
